import 'dart:ui';

import 'package:bruno/bruno.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:whale/pages/me/widgets/widgets.dart';
import '../../helper/utils/util.dart';
import 'index.dart';

class MePage extends StatelessWidget {
  MePage({Key? key}) : super(key: key);
  final controller = Get.put(MeController());
  final state = Get.find<MeController>().state;

  @override
  Widget build(BuildContext context) {
    return GetBuilder<MeController>(
      builder: (_) {
        return Container(
          color: Colors.white,
          child: ListView(
            padding: EdgeInsets.zero,
            children: [
              PersonCard(),
              Container(
                color: ColorsUtil.bg,
                padding: EdgeInsets.symmetric(horizontal: 16.r, vertical: 20.r),
                child: Row(
                  children: [
                    _getItemView(state.menus.first, isBig: true),
                    SizedBox(
                      width: 10.r,
                    ),
                    Column(
                      children: [
                        _getItemView(state.menus[1]),
                        SizedBox(
                          height: 10.r,
                        ),
                        _getItemView(state.menus.last),
                      ],
                    )
                  ],
                ),
              ),
              Container(
                decoration: const BoxDecoration(
                  color: ColorsUtil.bg,
                ),
                child: ClipRRect(
                  borderRadius:
                      BorderRadius.vertical(top: Radius.circular(10.r)),
                  child: Container(
                    decoration: const BoxDecoration(
                      color: ColorsUtil.bg,
                    ),
                    child: Column(
                        children: state.list
                            .asMap()
                            .map((key, e) => MapEntry(
                                key,
                                GestureDetector(
                                  onTap: e.onTap,
                                  child: Container(
                                    padding: EdgeInsets.symmetric(
                                      horizontal: 16.r,
                                    ),
                                    color: Colors.white,
                                    child: Column(
                                      mainAxisAlignment:
                                          MainAxisAlignment.spaceBetween,
                                      children: [
                                        Row(
                                          children: [
                                            Image.asset(
                                              e.icon!,
                                              width: 18.r,
                                              height: 18.r,
                                            ),
                                            SizedBox(
                                              width: 8.5.r,
                                              height: 44.r,
                                            ),
                                            Text(
                                              e.name,
                                              style: TextStyle(
                                                  color: ColorsUtil.title,
                                                  fontSize: 14.r),
                                            ),
                                            Spacer(),
                                            Icon(
                                              CupertinoIcons.chevron_right,
                                              size: 12.r,
                                              color: ColorsUtil.subTitle,
                                            )
                                          ],
                                        ),
                                        Container(
                                          margin: EdgeInsets.fromLTRB(
                                              27.r, 0, 0, 0),
                                          height: 0.5,
                                          color: key == state.list.length - 1
                                              ? Colors.white
                                              : ColorsUtil.separator,
                                        ),
                                      ],
                                    ),
                                  ),
                                )))
                            .values
                            .toList()),
                  ),
                ),
              ),
            ],
          ),
        );
      },
    );
  }

  Widget _getItemView(
    MeIconModel e, {
    bool isBig = false,
  }) {
    return InkWell(
      onTap: e.onTap,
      child: Container(
        width: (Get.width - 42.r) / 2,
        height: isBig ? 151.r : 70.5.r,
        padding: EdgeInsets.only(left: 15.5.r, top: 10.r),
        decoration: BoxDecoration(
          image: DecorationImage(image: AssetImage(e.url), fit: BoxFit.fill),
        ),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              e.name,
              style: TextStyle(color: Colors.black, fontSize: 14.r),
            ),
            SizedBox(
              height: 5.r,
            ),
            Text(
              e.val ?? '--',
              style: TextStyle(
                  color: e.textColor,
                  fontWeight: FontWeight.bold,
                  fontSize: 20.r),
            ),
          ],
        ),
      ),
    );
  }
}
